<template>
    <div class='container'>
        <Category>
            <!-- 用scope接收slot的传过来的参数 -->
            <template scope="data1">
                <div v-for="user in data1.users" :key='user.id'>
                        <span>{{user.game}}</span>
                </div>
            </template>
        </Category>
        <Category>
            <!-- 用scope接收slot的传过来的参数，用花括号直接接收里面的属性 -->
            <template scope="{users}">
                <div v-for="user in users" :key='user.id'>
                        <span>{{user.game}}</span>
                </div>
            </template>
        </Category>
        <Category>
            <!-- 用scope接收slot的传过来的参数，用花括号直接接收里面的属性 -->
            <!-- scope可以写成slot-scope -->
            <template slot-scope="{users}">
                <div v-for="user in users" :key='user.id'>
                        <span>{{user.game}}</span>
                </div>
            </template>
        </Category>
    </div>
</template>

<script>
    // 要删掉.vue不然会报错
    import Category from './components/Category'
    export default {
        name : "App",
        components:{
            Category,
        }
    }
</script>

<style scoped>
    .container{
        /* css加分号 */
        display:flex;
        height: 300px;
        justify-content: space-around;
    }
    image{
        width: 100%;
        display:inline;
    }
    video{
        width: 100%;
    }
</style>